How to make your HTML form work

The easiest way to learn how to create a form is to look at an example, then modify it to do what you want to do.

Simple Demonstration Form.

Go to that site, and look at the source using View-> Source in your browser. Some browsers have View-> Source in different places but it should be there. In my Mac, Firefox has view source under Tools -> Developer -> Page Source.

Note that there are tags both at the beginning and end of the form which you need in order for it to work.

Here's the part at the top:

<!-- This line selects the destination for the form post -->
<form METHOD="post" ACTION="http://www.brandx.net/cgi-bin/mailto">
<!-- The followup page will be thanks.html-->
<INPUT TYPE="hidden" NAME="redirect"
   VALUE="http://www.brandx.net/lacc/caot112/turtles/thanks.html"> 
<!-- The recipient will be xxxx@brandx.net. -->
<INPUT TYPE="hidden" NAME="recipient" VALUE="jimp@brandx.net">
<input  type="hidden" name="version" size=50 value="August 28, 1995">

In order to set up your own web page, you would need to change the email address ("recipient") and the follow up page.

Then insert some blanks for people to fill in on your form. For example:

 <INPUT SIZE=19 MAXLENGTH=19 NAME="z03_card-number">

Creates a field with length 19 for a card number.

How to make a form from scratch

On your form page, you need to have a form beginning <form> and an end </form>.

The form statement should indicate an action, which is what happens when someone hits the submit button. In our example above, form statement looks like this:

<form METHOD="post" ACTION="http://www.brandx.net/cgi-bin/mailto">

This means when you submit the form, it will be sent to a script on the server www.brandx.net. If you don't have this, your form will look just fine, but you won't be able to submit it.

Commands to the server are contained in the "hidden" fields in your form. Some of the legal commands include recipient, version, subject, redirect, etc. You can make a filed mandatory by using the hidden field "required", then have a list of the fields that are required.

<input type="hidden" name="required" value="name,comments"

Next, create your form with some form objects placed between the beginning and the end of the form. Be sure to include a submit button. Refer to the example above to see how this works.

You can use the "insert" menu from Dreamweaver to save a little typing. You can find the various elements in the menu under insert -> form.

A complete list of form elements may be found on the w3schools website at http://www.w3schools.com/html/html_forms.asp

Exercise

Create a working order form and make it look nice.

Try to include one of each of the following elements:

Reminder: for your form to work, you will need to give me an email address which I will add to the security list. Our form processor looks at the incoming forms, and if it doesn't recognize the email "recipient" value it rejects them. Or it's supposed to anyway.